<template>
	<view class="pageBox" :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				充值余额
			</view>
			<view class="right" @click="goPage('/balance/rechargeRecord')">
				收支明细
			</view>
		</view>

		<view class="content">
			<view class="addBank flex-center" @click="onPayway" v-if="!actions.length">
				<image class="cross" src="http://www.bobei.shop/static/third/cross.png" mode=""></image>
				<view class="addBankText">
					添加银行卡
				</view>
			</view>

			<view class="top flex-between" @click="onPayway" v-if="actions.length">
				<view class="topTitle">
					充值方式
				</view>
				<view class="topMain">
					<view class="topMainT">
						{{ actionsChoose.name }}
					</view>
					<view class="topMainB" v-if="actionsChoose.cardNo">
						{{ actionsChoose.cardNo }}
					</view>
				</view>
				<image class="arrowRight" src="http://www.bobei.shop/static/home/arrowRight.png" mode=""></image>
			</view>

			<view class="tips flex-row">
				<view class="tipsStar">
					*
				</view>
				<view class="tipsText">
					说明：必须添加本人名下借记卡，一但用户名绑定，将无法更改用户名。
				</view>
			</view>

			<view class="accumulative flex-between">
				<view class="accumulativeItem flex-center">
					<view class="accumulativeItemTop">
						000
					</view>
					<view class="accumulativeItemBom">
						累计充值
					</view>
				</view>
				<view class="line"></view>
				<view class="accumulativeItem flex-center">
					<view class="accumulativeItemTop">
						000
					</view>
					<view class="accumulativeItemBom">
						本月充值
					</view>
				</view>
			</view>

			<view class="rechargeTitle flex-row">
				<view class="rechargeTitleLeft">
					充值金额
				</view>
				<view class="rechargeTitleRight">
					（立刻到账）
				</view>
			</view>

			<view class="iptBox flex-between">
				<view class="ipt flex-row">
					<view class="iptLeft">
						¥
					</view>
					<input class="iptObj" type="number" placeholder="请输入充值金额" v-model="amount">
				</view>
				<image class="cleanICon" src="http://www.bobei.shop/static/third/cleanIcon.png" @click="amount = ''">
				</image>
			</view>

		</view>

		<button :class="[disabled ? 'completeBtn completeBtn2' : 'completeBtn']" :plain="true" @click="onBtn"
			:disabled="disabled">
			<view class="lineBox flex">
				<view class="line"></view>
				<view class="line2"></view>
			</view>
			确认充值
		</button>

		<my-popup-tips type="bottom" :showTips="paywayShow" @tipsOpen="paywayOpen" @tipsClose="paywayClose">
			<template #default>
				<view class="paywayBox">
					<image class="close" src="http://www.bobei.shop/static/my/payway/close.png"
						@click="paywayShow = false"></image>
					<view class="paywayTitle">
						选择充值方式
					</view>

					<view class="way">
						<view class="wayItem flex-between" v-for="item in actions" :key="item.id"
							@click="onWayItem(item)">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" :src="item.image"></image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										{{ item.name }}
									</view>
									<!-- 	<view class="wayItemLeftConCard">
										123456789
									</view> -->
								</view>
							</view>
							<view class="wayItemRight">
								<image class="choose" src="http://www.bobei.shop/static/login/choose.png"
									v-if="!item.status">
								</image>
								<image class="choose" src="http://www.bobei.shop/static/login/choosed.png"
									v-if="item.status">
								</image>
							</view>
						</view>

						<view class="wayItem flex-between" @click="goMyBankCard('/pages/my/bank/myBankCard')">
							<view class="wayItemLeft flex-row">
								<image class="wayItemLeftImg" src="http://www.bobei.shop/static/my/payway/yinHang.png">
								</image>
								<view class="wayItemLeftCon">
									<view class="wayItemLeftConText">
										添加银行卡
									</view>
								</view>
							</view>
							<view class="wayItemRight">
								<view class="add flex-row">
									<view class="addText">
										去添加
									</view>
									<image class="arrowRight" src="http://www.bobei.shop/static/home/arrowRight.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>

					<button class="paySure" :plain="true" @click="onPaySure">确定</button>
				</view>
			</template>
		</my-popup-tips>

		<!-- 密码框 -->
		<my-popup-tips :showTips="passShow" :mask="true" @tipsOpen="passTipsOpen" @tipsClose="passTipsClose">
			<view class="passTipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="tipsText flex-center">
					<input type="password" class="safeword" v-model="safeword" placeholder="请输入支付密码">
				</view>

				<view class="tipsBtnBox flex-between">
					<button class="tipsCloseBtn" :plain="true" @click="onPassTipsCloseBtn">取消</button>
					<button class="tipsSureBtn" :plain="true" :disabled="oneClick" @click="onPassTipsSureBtn">确定</button>
				</view>
			</view>
		</my-popup-tips>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue"
	export default {
		components: {
			"my-popup-tips": myPopupTips,
		},
		data() {
			return {
				statusBarHeight: "",
				amount: "",

				paywayShow: false,
				bankIcon: {
					CIB: "http://www.bobei.shop/static/my/payway/CIB.png", // 兴业银行
					ECITIC: "http://www.bobei.shop/static/my/payway/ECITIC.png", // 中信银行
					PINGANBANK: "http://www.bobei.shop/static/my/payway/PINGANBANK.png", // 平安银行
					SHB: "http://www.bobei.shop/static/my/payway/SHB.png", // 上海银行
					ABC: "http://www.bobei.shop/static/my/payway/ABC.png", // 农业银行
					BCCB: "http://www.bobei.shop/static/my/payway/BCCB.png", // 北京银行
					BOC: "http://www.bobei.shop/static/my/payway/BOC.png", // 中国银行
					BOCO: "http://www.bobei.shop/static/my/payway/BOCO.png", // 交通银行
					CCB: "http://www.bobei.shop/static/my/payway/CCB.png", // 建设银行
					CEB: "http://www.bobei.shop/static/my/payway/CEB.png", // 光大银行
					CGB: "http://www.bobei.shop/static/my/payway/CGB.png", // 广发银行
					CMBC: "http://www.bobei.shop/static/my/payway/CMBC.png", // 民生银行
					CMBCHINA: "http://www.bobei.shop/static/my/payway/CMBCHINA.png", // 招商银行
					HXB: "http://www.bobei.shop/static/my/payway/HXB.png", // 华夏银行
					ICBC: "http://www.bobei.shop/static/my/payway/ICBC.png", // 工商银行
					POST: "http://www.bobei.shop/static/my/payway/POST.png", // 邮储银行
					SPDB: "http://www.bobei.shop/static/my/payway/SPDB.png", // 浦发银安
				},
				actionsChoose: {
					name: "", // 支付方式名称
					id: "", // 支付方式id
					status: false, // 是否选中
					image: "", // 支付方式图标
					bankCardId: "", // 银行卡支付的银行卡id
					bankAbb: "", // 银行缩写大写字母
					cardNo: "", // 银行卡号
				},
				actions: [

				],
				actions2: [
					// {
					// 	name: "账户余额", // 支付方式名称
					// 	id: "0", // 支付方式id
					// 	status: false, // 是否选中
					// 	image: "http://www.bobei.shop/static/my/payway/yuE.png", // 支付方式图标
					// 	bankCardId: "", // 银行卡支付的银行卡id
					// 	bankAbb: "", // 银行缩写大写字母
					//  cardNo: "", // 银行卡号
					// },
					// {
					// 	name: "微信支付",
					// 	id: "1",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					//  cardNo: "",
					// },
					{
						name: "支付宝支付",
						id: "2",
						status: false,
						image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
						bankCardId: "",
						bankAbb: "",
						cardNo: "",
					},
					//// 微信APP支付
					// {
					// 	name: "微信APP",
					// 	id: "11",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/weiXin.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					//  cardNo: "",
					// },
					//// 支付宝APP支付
					// {
					// 	name: "支付宝APP",
					// 	id: "12",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/zhiFuBao.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					//  cardNo: "",
					// },
					// {
					// 	name: "云闪付",
					// 	id: "3",
					// 	status: false,
					// 	image: "http://www.bobei.shop/static/my/payway/yuShanFu.png",
					// 	bankCardId: "",
					// 	bankAbb: "",
					//  cardNo: "",
					// },
				],
				passShow: false,
				safeword: "",
				oneClick: false,
			}
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
		},
		onShow() {
			this.getBankCardList();
		},
		computed: {
			disabled() {
				if (this.amount) {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			onPassTipsSureBtn() {
				if (!this.safeword) {
					uni.showToast({
						title: "请输入支付密码",
						icon: "none",
						duration: 1500
					})
					return;
				}
				this.oneClick = true;
				this.$post({
					module: "Pay",
					interface: "2000",
					data: {
						way: this.actionsChoose.id, // 1：微信小程序性，2：支付宝h5，3：银联APP 4 银行卡 11微信app 12 支付宝app
						from: "app", // 写死没啥用
						amount: this.amount,
						type: 1, // 充值到钱包 1:余额 2参团劵 3话费
						phone: "",
						order_money: "",
						cardId: this.actionsChoose.bankCardId,
						safeword: this.safeword,
					}
				}).then((res) => {
					// uni.showToast({
					// 	title: "操作成功",
					// 	icon: "none",
					// 	duration: 1500
					// })
					// this.goBack();
					if (this.actionsChoose.id == '2') { // 支付宝H5支付
						// #ifdef  H5
						this.passShow = false;
						setTimeout(() => {
							this.oneClick = false;
						},1500)
						window.location.href = res.charge;
						// #endif
						// #ifdef  APP-PLUS
						// uniapp打开浏览器
						this.passShow = false;
						setTimeout(() => {
							this.oneClick = false;
						},1500)
						plus.runtime.openURL(res.charge);
						// #endif
					} else if (this.actionsChoose.id == '4') { // 银行卡
						uni.showToast({
							title: "操作成功",
							icon: "none",
							duration: 1500
						})
						this.passShow = false;
						setTimeout(() => {
							this.oneClick = false;
							this.goBack();
						}, 1000)
					}
				}).catch(() => {
					this.passShow = false;
					setTimeout(() => {
						this.oneClick = false;
					}, 1000)
				});
			},
			onPassTipsCloseBtn() {
				this.passShow = false;
			},
			passTipsOpen(param) {
				this.passShow = param;
			},
			passTipsClose(param) {
				this.passShow = param;
			},
			paywayOpen(param) {
				this.paywayShow = param;
			},
			onPayway() {
				if (!this.amount) {
					uni.showToast({
						title: "请输入充值金额",
						icon: "none",
						duration: 1500
					})
					return;
				}
				this.paywayShow = true;
			},
			paywayClose(param) {
				this.paywayShow = param;
			},
			onPaySure() {
				this.paywayShow = false;
				this.passShow = true;
			},
			goMyBankCard(url) {
				this.paywayShow = false;
				uni.navigateTo({
					url: url
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 银行卡列表
			getBankCardList() {
				this.$post({
					module: "Finance",
					interface: "1000",
				}).then((res) => {
					// console.log("银行卡列表", res);
					let bankCardList = [];
					res.list.forEach((item, index) => {
						bankCardList[index] = {
							name: item.cardNo,
							id: "4",
							status: false,
							image: this.bankIcon[item.bankCode] ?
								this.bankIcon[item.bankCode] :
								"http://www.bobei.shop/static/my/payway/yinHang.png",
							bankCardId: item.id,
							bankAbb: item.bankCode,
							cardNo: item.cardNo,
						};
					});

					this.actions = [...this.actions2, ...bankCardList];
					if (this.actions.length) {
						this.actions[0].status = true;
						this.actionsChoose = {
							name: this.actions[0].name,
							id: this.actions[0].id,
							status: this.actions[0].status,
							image: this.actions[0].image,
							bankCardId: this.actions[0].bankCardId,
							bankAbb: this.actions[0].bankAbb,
							cardNo: this.actions[0].cardNo,
						}
					}

					// console.log("actions", this.actions);
				});
			},
			onWayItem(param) {
				this.actions.forEach((item) => {
					item.status = false;
					if (param.id == item.id) {
						item.status = true;
						this.actionsChoose = {
							name: item.name,
							id: item.id,
							status: item.status,
							image: item.image,
							bankCardId: item.bankCardId,
							bankAbb: item.bankAbb,
							cardNo: item.cardNo,
						}
					}
				})
			},
			onBtn() {
				this.paywayShow = true;

			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #f9f9f9;
		line-height: 1.2;

		.topHead {
			background-color: #ffffff;
			height: 88rpx;
			width: 100%;
			padding: 0 32rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;

		

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				position: absolute;
				top: 22rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.right {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
			}
		}

		.content {
			width: 100%;
			background-color: #ffffff;
			padding: 24rpx 0 38rpx;

		}

		.addBank {
			width: 690rpx;
			height: 294rpx;
			background-image: url("http://www.bobei.shop/static/third/balanceBoxBg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
			flex-direction: column;

			.cross {
				width: 116rpx;
				height: 116rpx;
			}

			.addBankText {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 48rpx;
			}
		}

		.top {
			padding: 64rpx 30rpx 0;

			.topTitle {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 32rpx;
				width: 150rpx;
			}

			.topTitle2 {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}

			.topMain {
				flex: 1;
				padding-left: 64rpx;


				.topMainT {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 32rpx;
				}

				.topMainB {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #afa9b0;
					line-height: 36rpx;
				}
			}

			.arrowRight {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.tips {
			margin-top: 24rpx;
			padding: 0 48rpx 0 52rpx;

			.tipsStar {
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
			}

			.tipsText {
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.accumulative {
			margin-top: 28rpx;
			padding: 24rpx 0 22rpx 0;
			background-color: #F9F9F9;

			.accumulativeItem {
				flex: 1;
				flex-direction: column;

				.accumulativeItemTop {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.accumulativeItemBom {
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-top: 8rpx;
				}
			}

			.line {
				width: 1px;
				height: 60rpx;
				background-color: #B6B6B6;
			}
		}

		.rechargeTitle {
			margin: 32rpx 0 0 30rpx;

			.rechargeTitleLeft {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.rechargeTitleRight {
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-left: 24rpx;
			}
		}

		.iptBox {
			margin: 24rpx auto 0;
			width: 92%;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #BEBEBE;

			.ipt {
				flex: 1;
				.iptLeft {
					font-size: 48rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.iptObj {
					font-size: 60rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					padding-left: 34rpx;
				}
			}

			.cleanICon {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.completeBtn {
			width: 630rpx;
			height: 100rpx;
			background: #F2615F;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 33rpx;
			padding: 0;
			margin: 202rpx auto 0;
			border: none;
			position: relative;

			.lineBox {
				position: absolute;
				top: 12rpx;
				left: 42rpx;

				.line {
					width: 17rpx;
					height: 3rpx;
					background: #FFFFFF;
					border-radius: 2rpx;
				}

				.line2 {
					width: 55rpx;
					height: 3rpx;
					background: #FFFFFF;
					border-radius: 2rpx;
					margin-left: 6rpx;
				}
			}
		}

		.completeBtn2 {
			background: #999999;
		}












		.paywayBox {
			width: 100%;
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0 0;
			padding-top: 44rpx;
			position: relative;
			padding-bottom: 41rpx;

			.close {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 18rpx;
				right: 20rpx;
				z-index: 1;
			}

			.paywayTitle {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 50rpx;
				text-align: center;
			}

			.way {
				margin-top: 40rpx;

				.wayItem {
					padding: 0 39rpx 0 40rpx;
					height: 110rpx;
					border-top: 2rpx solid #F5F5F5;

					.wayItemLeft {
						.wayItemLeftImg {
							width: 44rpx;
							height: 44rpx;
						}

						.wayItemLeftCon {
							margin-left: 20rpx;

							.wayItemLeftConText {
								font-size: 30rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 42rpx;
							}

							.wayItemLeftConCard {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 42rpx;
							}
						}
					}

					.wayItemRight {
						.choose {
							width: 40rpx;
							height: 40rpx;
						}

						.add {
							.addText {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 37rpx;
							}

							.arrowRight {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}

				.wayItem:nth-last-of-type(1) {
					border-bottom: 2rpx solid #F5F5F5;
				}

			}

			.paySure {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;
				width: 610rpx;
				height: 88rpx;
				background: #F2615F;
				border-radius: 16rpx;
				margin: 40rpx auto 0;
				padding: 0;
				border: none;
			}
		}

		.passTipsBox {
			width: 550rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 30rpx;

			.tipsTitle {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.tipsText {
				margin-top: 30rpx;

				.safeword {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #736464;
					line-height: 40rpx;
					width: 100%;
					height: 60rpx;
					border: 1px solid #333333;
					border-radius: 16rpx;
					padding-left: 10rpx;
				}
			}

			.tipsBtnBox {
				width: 100%;
				margin-top: 30rpx;

				button {
					padding: 0;
					margin: 0;
					width: 200rpx;
					height: 72rpx;
					border-radius: 52rpx;
					font-size: 28rpx;
				}

				.tipsCloseBtn {
					color: #F2615F;
					border: 2rpx solid #F2615F;
				}

				.tipsSureBtn {
					color: #ffffff;
					border: none;
					background: #F2615F;
				}
			}
		}
	}
</style>
